<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
	language="java"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<h2>Danh sách sân bóng có thể đặt</h2>
<p/>
<div class="list-table">
	<p><span id="error_message" class="error_message"></span></p>
	<form method="post" action="" id="form" name="form" >
	<table id="ver-zebra">
		<colgroup>
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			
		</colgroup>
		<thead>
			<tr>
				<th scope="col" id="vzebra-adventure">Tên sân</th>
				<th scope="col" id="vzebra-adventure">Sân</th>
				<th scope="col" id="vzebra-adventure">Quận</th>
				<th scope="col" id="vzebra-adventure">Địa chỉ</th>
				<th scope="col" id="vzebra-adventure">Nhân viên</th>
				<th scope="col" id="vzebra-adventure">Mô tả</th>
				<th scope="col" id="vzebra-adventure">Khung giờ</th>
				<th scope="col" id="vzebra-adventure">Bảng giá</th>
				<th scope="col" id="vzebra-adventure">Trong ngày</th>
				<th scope="col" id="vzebra-adventure">Trong tháng</th>
				<th scope="col" id="vzebra-adventure">Đặt cọc</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				<td colspan="10"><span id="error_message" class="error_message"></span></td>
			</tr>
			<s:if test="%{listSoccerField.isEmpty()}">
				<tr>
					<td colspan="10">Chưa có dữ liệu</td>
				</tr>
			</s:if>
			<s:else>
				<s:iterator value="listSoccerField">
					<s:iterator var="div" value="listTimeDivision">
					<tr>
						<%-- <td><input type="radio" name="select" id="select"
							onchange="$('#error_message').css('display','none');$('#form').validate().resetForm();"
							onfocus="setSoccerField('<s:property value="id"/>','<s:property value="name" />','<s:property value="image_url" />','<s:property value="district" />','<s:property value="address"/>',
							'<s:property value="listTimeDivision[0].period"/>','<s:property value="getPrice(listTimeDivision[0].price)"/>',
							'<s:property value="listTimeDivision[1].period"/>','<s:property value="getPrice(listTimeDivision[1].price)"/>',
							'<s:property value="listTimeDivision[2].period"/>','<s:property value="getPrice(listTimeDivision[2].price)"/>',
							'<s:property value="listTimeDivision[3].period"/>','<s:property value="getPrice(listTimeDivision[3].price)"/>',
							'<s:property value="listTimeDivision[4].period"/>','<s:property value="getPrice(listTimeDivision[4].price)"/>',
							'<s:property value="description"/>')" /></td> --%>
							
						<td><s:property value="name" /></td>
						<td><s:property value="subSoccerField" /></td>
						<td><s:property value="district" /></td>
						<td><s:property value="address" /></td>
						<td><s:property value="staff.name" /></td>
						<td><s:property value="description" escapeHtml="false" /></td>
						<td><s:property value="period" /></td>
						<td><s:property value="getPriceFormat(price)" /></td>
						<td><input type="checkbox" name="checkDay" class="checkDay" value="<s:property value="id" />"  onchange="unSelectCheckDay();" /></td>
						<td><input type="checkbox" name="checkMonth" class="checkMonth" value="<s:property value="id" />"  onchange="unSelectCheckDay();" /></td>
						
						<td><input type="text" name="deposits" disabled="true" class="deposits" id="deposits" width="10"/></td>
						<td><input type="hidden" name="depositsTemp" class="depositsTemp" value="<s:property value="id" />"/></td>
					  </tr>
					</s:iterator>
				</s:iterator>
				<tr class="old">
					<td></td>
					<td colspan="9">
						<s:if test="#session.user != null">
							<input type="submit" value="Đặt sân" onclick="saveSoccerOrder();" />
						</s:if>		
					</td>
				</tr>
			</s:else>
		</tbody>
	</table>
	</form>
</div>

<script type="text/javascript">

	 $(document).ready(
		function() {
			unSelectCheckDay();
			saveSoccerOrder();
				$(".deposits")
						.keydown(
								function(e) {
									
										// Allow: backspace, delete, tab, escape, enter and .110 dau .
										if ($.inArray(e.keyCode, [ 46,
												8, 9, 27, 13, 190 ]) !== -1
												||
												// Allow: Ctrl+A
												(e.keyCode == 65 && e.ctrlKey === true)
												||
												// Allow: home, end, left, right
												(e.keyCode >= 35 && e.keyCode <= 39)) {
											// let it happen, don't do anything
											return;
										}
										// Ensure that it is a number and stop the keypress
										if ((e.shiftKey || (e.keyCode<48 || e.keyCode>57))
												&& (e.keyCode<96 || e.keyCode>105)) {
											e.preventDefault();
										}
										
								});
				
		});

	function saveSoccerOrder() {
		$('#form').validate({
			submitHandler : function(form) {
				var datastr = $("#form").serialize();
				if(datastr){
					$.ajax({
						type : "POST",
						url : 'saveSoccerOrder',
						data : datastr,
						cache : false,
						dataType : 'text',
						beforeSend : function() {
							$.blockUI({
								css : {
									border : 'none',
									padding : '15px',
									backgroundColor : '#000',
									'-webkit-border-radius' : '10px',
									'-moz-border-radius' : '10px',
									opacity : .5,
									color : '#fff'
								}
							});
						},
						complete : function() {
							$.unblockUI();
						},
						success : function(html) {
							goBack();
						},
						error : function(err) {
							$('#error_message').html("Thêm mới thất bại");
							$('#error_message').css("display", "block");
						}
					});
				} else {
					$('#error_message').html("Bạn chưa chọn sân ..");
					$('#error_message').css("display", "block");
				}
				
			}
		});
	}

	function unSelectCheckDay() {
		$(".checkMonth").each(function(i) {
			if (this.checked) {
				$(".checkDay")[i].checked = false;
			}
		});
		
		showInput();
	}
	
	function showInput() {
		var checkMonth = $(".checkMonth");
		var checkDay = $(".checkDay");
		var deposits = $(".deposits");
		for(var i = 0; i < checkMonth.length; i++ ) {
			if(checkMonth[i].checked || checkDay[i].checked ) {
				deposits[i].disabled = false;
			} else {
				deposits[i].disabled = true;
			}
		}
		
	}
	
	function goBack() {
		var url = "viewSoccerOrder";
		window.location.href = url;
	}
	
</script>
